<script setup>

import SvgIcon from "../../../Svglcon.vue";
import {Search} from '@element-plus/icons-vue'
import { reactive, ref} from "vue";


const inputFilter = ref('')


const index = reactive(null)
const checked1 = ref(null)
const images = reactive([
  'https://dummyimage.com/800/ffffff/000000',
  'https://dummyimage.com/1600/ffffff/000000',
  'https://dummyimage.com/1280/000000/ffffff',
  'https://dummyimage.com/400/000000/ffffff',
  'https://dummyimage.com/1280/000000/ffffff',
  'https://dummyimage.com/400/000000/ffffff',
  'https://dummyimage.com/800/ffffff/000000',
  'https://dummyimage.com/1600/ffffff/000000',
  'https://dummyimage.com/1280/000000/ffffff',
  'https://dummyimage.com/400/000000/ffffff',
  'https://dummyimage.com/800/ffffff/000000',
  'https://dummyimage.com/1600/ffffff/000000',
  'https://dummyimage.com/1280/000000/ffffff',
  'https://dummyimage.com/400/000000/ffffff',
])

const selectImagesList = ref([])

function handleImageSelect(image) {
  if (selectImagesList.value.includes(image)) {
    selectImagesList.value.splice(selectImagesList.value.indexOf(image), 1)
  }else {
    selectImagesList.value.push(image);
  }
  console.log(selectImagesList.value)
}

</script>

<template>
  <div class="pictureAblumWarp">
    <div class="pictureFliter">
      <div class="button_all">
        全部
      </div>
      <div class="button_card">
        <svg-icon name="close"></svg-icon>
      </div>
      <div class="button_card">
        <svg-icon name="close"></svg-icon>
      </div>
      <div class="button_card">
        <svg-icon name="close"></svg-icon>
      </div>
      <div class="button_card">
        <svg-icon name="close"></svg-icon>
      </div>
      <div class="button_card">
        <svg-icon name="close"></svg-icon>
      </div>
      <div class="button_card">
        <svg-icon name="close"></svg-icon>
      </div>

      <div class="inputFilterWarp">
        <el-input
            v-model="inputFilter"
            style="width: 100%;"
            placeholder="Please Input"
            :suffix-icon="Search"
        />
      </div>
    </div>
    <div class="pictureAblum">
      <el-scrollbar height="100%">
        <div class="scrollPlatform">
          <div class="imageWarp" v-for="(image, imageIndex) in images">
            <div
                class="image"
                :key="imageIndex"
                :style="{ backgroundImage: 'url(' + image + ')', width: '220px', height: '220px' }"
            >
              <el-checkbox :value="image" size="large" class="imageCheck" @click="handleImageSelect(image)">
              </el-checkbox>
            </div>
            <div class="imageTitle">

              {{imageIndex + 1}}

            </div>
          </div>

        </div>

      </el-scrollbar>
    </div>
  </div>

</template>

<style scoped lang="scss">

.pictureAblumWarp {
  box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;


  .pictureFliter {
    display: flex;
    align-items: center;

    .button_all {
      width: 50px;
      height: 30px;
      border-radius: 4px;
      border: #999999 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .button_card {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      border: #999999 1px solid;
      margin-right: 5px;
      margin-left: 5px;
    }

    .inputFilterWarp {
      flex: 1;

    }


  }

  .pictureAblum {
    width: 100%;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 5px;

    .scrollPlatform {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;

      .imageWarp {
        display: flex;
        flex-direction: column;


        .image {
          float: left;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          border: 0.5px solid #ebebeb;
          box-sizing: border-box;

          .imageCheck {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-left: 5px;
            padding-top: 5px;
            display: flex;
            align-items: flex-start;
          }
        }

        .imageTitle {
          width: 220px;
          height: 20px;
          border: 0.5px solid #ebebeb;
          border-top: 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;

        }
      }

    }


  }


}

</style>